<template>
  <div class="index-add">
    <div class="title">添加用户</div>

    <el-form :model="formData" ref="formData" label-width="100px" :rules="rules"
             v-loading="formSubmitLoading"
             element-loading-text="提交中"
    >
      <el-form-item label="姓名:" prop="name">
        <el-input v-model="formData.name"></el-input>
      </el-form-item>
      <el-form-item label="密码:" prop="password">
        <el-input v-model="formData.password"></el-input>
      </el-form-item>
      <el-form-item label="性别:" prop="sex">
        <el-radio class="radio" v-model="formData.sex" label="1">男</el-radio>
        <el-radio class="radio" v-model="formData.sex" label="0">女</el-radio>
      </el-form-item>
      <el-form-item label="年龄:" prop="ages">
        <el-input  v-model="formData.ages"></el-input>
      </el-form-item>
      <el-form-item label="电话:" prop="phone">
        <el-input v-model="formData.phone"></el-input>
      </el-form-item>
      <el-form-item  label="住址:" prop="address">
        <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" v-model="formData.address" style="width: 300px; float: left"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('formData')">立即创建</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'index',
  data () {
    return {
        formData:{
          name:'',
          password:'',
          sex:'',
          ages:'',
          phone:'',
          address:'',
        },
      formSubmitLoading:false,
      rules: {
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ],
        sex: [
          { required: true, message: '请选择性别', trigger: 'change' }
        ],
        ages: [
          { required: true, message: '请输入年龄', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入电话', trigger: 'blur' },
          {min:11,max:11,message:'请输入11位手机号',trigger:'blur'}
        ],
        address: [
          { required: true, message: '请输入地址', trigger: 'blur' }

        ],
      },
    }
  },
  methods:{
    submitForm(refName){
        this.$refs[refName].validate((e)=>{
          if(e){
            this.formSubmitLoading = true
              this.$http({
                method:'post',
                url:'/index/index/ajaxAddUser',
                params:this.formData
              }).then((data)=>{
                this.formSubmitLoading = false
                if (data.body.error == 0) {
                    this.$message({
                        message: '添加成功，立即跳转',
                        type: 'success'
                    });
                    setTimeout(function () {
                            this.$router.push({
                                path: '/index/query'
                            })
                        }.bind(this), 1000)
                }else{
                    this.$message.error('添加失败');
                }
              })
          }
        })
    }
  }
}
</script>

<style scoped>
  .index-add .title{
    font-size: 2em;
    text-align: left;
    padding:.5em 2em;
  }
  .el-input {
    width: 300px;
    float: left;
  }
  .el-radio {
    float: left;
  }
  .el_textarea{
    float: left;
  }
  .el-button {
    float: left;
  }
</style>
